$(function () {
    var videoBtn = $(".pv-video-btn"); // pv视频按钮
    var Bannervideo = $(".video-player"); // pv视频大盒子
    var closeBannerVideo = $(".video-close"); // 关闭pv视频按钮
    // 点击pv视频按钮出现pv视频
    videoBtn.click(function () {
        Bannervideo.addClass("active");
    })
    // 关闭pv视频函数
    function closeVideo() {
        Bannervideo.removeClass("active");
    }
    // 点击关闭pv视频按钮关闭pv
    closeBannerVideo.click(closeVideo);
    // 点击pv视频大盒子任意地方关闭pv
    Bannervideo.click(closeVideo);
    // 点击pv视频不会关闭pv视频
    Bannervideo.children().eq(0).click(function (e) {
        e.stopPropagation();
    })

    // pc下载
    var pcd = $(".pc-down");
    var pcdl = $(".pc-download");
    var closePcd = $(".pcdl-close");
    pcd.click(function () {
        pcdl.addClass("active");
    })
    function closePcdl() {
        pcdl.removeClass("active");
    }
    pcdl.click(closePcdl);
    closePcd.click(closePcdl);
    pcdl.children().eq(0).click(function (e) {
        e.stopPropagation();
    })

    // 新闻资讯轮播图  
    var swiper = new Swiper(".mySwiper", {
        pagination: {
            el: ".swiper-pagination",
            loop: true,
            clickable: true
        },
    });

    // 新闻资讯详情
    var cates = $(".cates .cate"), newcontents = $(".new-content");
    cates.each(function (index, item) {
        $(item).click(function () {
            cates.each(function (index1, item1) {
                $(item1).removeClass("active");
            })
            $(this).addClass("active");
            newcontents.each(function (index1, item1) {
                $(item1).removeClass("active");
            })
            newcontents.eq(index).addClass("active")
        })
    })

    // 角色切换
    var roleData = [
        {
            img: "../img/index-roles-yuehen.png",
            name: "维尔薇",
            roleCard: "玉骑士·月痕",
            fight: "拳套",
            videoImg: "https://webstatic.mihoyo.com/upload/contentweb/2022/09/28/77415a2402c38bdf553a4c94f69ab9b4_650913569202881562.png",
            skillInfo: "异能属性冰元素辅助角色",
            video:"https://webstatic.mihoyo.com/upload/op-public/2022/09/28/0e9582b7b83ce101bd1b3a37a2ef081e_518464447120092921.mp4"
        },
        {
            img: "../img/index-roles-zhenwo.png",
            name: "爱莉希雅",
            roleCard: "真我·人之律者",
            fight: "弓箭",
            videoImg: "https://webstatic.mihoyo.com/upload/contentweb/2022/08/17/e0a9415097084d7168e2ff15e1405b55_7486254230498390806.png",
            skillInfo: "异能属性冰元素输出角色",
            video:"https://webstatic.mihoyo.com/upload/op-public/2022/08/17/0962a7bf1fe7264bc5329ea684637965_2505093309784843214.mp4"
        },
        {
            img: "../img/index-roles-luoxuan.png",
            name: "维尔薇",
            roleCard: "螺旋·愚戏之匣",
            fight: "重炮",
            videoImg: "https://webstatic.mihoyo.com/upload/contentweb/2022/07/12/704ad34ecda0e31aa8d52fbfd13bde39_5051181835430241366.png",
            skillInfo: "量子属性火焰元素输出角色",
            video:"https://webstatic.mihoyo.com/upload/op-public/2022/07/12/56fee6d3943d5bda23f4178c73abeabb_7939427689682318468.mp4"
        }
    ];
    var roleBigImg = $(".big-img");
    var roleInfo = $(".role-info");
    var roleBtns = $(".base-role-btn");
    var roleVideo = $(".rolevideo-content");
    roleBtns.each(function (index, item) {
        $(item).click(function () {
            roleBtns.each(function (index1, item1) {
                $(item1).removeClass("active");
            })
            $(this).addClass("active");

            // 大图片部分
            roleBigImg.empty();
            roleBigImg.append(`
                <img src="${roleData[index].img}" alt="图片加载失败">
            `)

            // 人物介绍部分 
            roleInfo.empty();
            roleInfo.append(`
                <div class="role-info-title">
                    <h2>${roleData[index].name}</h2>
                    <p>角色卡：${roleData[index].roleCard}</p>
                </div>
                <div class="role-info-weapon">
                    <div class="weapon-text">
                        <div>
                            姓名：${roleData[index].name}
                        </div>
                        <div>
                            装甲：${roleData[index].roleCard}
                        </div>
                        <div>
                            作战方式：${roleData[index].fight}
                        </div>
                    </div>
                    <div class="weapon-video">
                        <img src="${roleData[index].videoImg}" alt="米哈游">
                        <div class="weapon-video-btn"></div>
                    </div>
                </div>
                <div class="role-info-intro">
                    <div>
                        <div class="title">
                            <div class="line"></div>
                            <span>角色介绍</span>
                            <span>Character Overview</span>
                        </div>
                        <p>${roleData[index].skillInfo}</p>
                    </div>
                </div>
            `);

            // 角色视频部分
            roleVideo.empty();
            roleVideo.append(`
                <div class="rolevideo-close"></div>
                <video src="${roleData[index].video}" controls></video>
            `)
        })

        var roleVideoBtn = $(".weapon-video-btn"); // 角色视频按钮
        var roleBannervideo = $(".rolevideo-player"); // 角色视频大盒子
        var closeRoleVideoBtn = $(".rolevideo-close"); // 关闭角色视频按钮

        $(document).on("click", ".weapon-video-btn", function () {
            roleBannervideo.addClass("active");
        })

        function closeRoleVideo() {
            roleBannervideo.removeClass("active");
        }

        closeRoleVideoBtn.click(closeRoleVideo);
        roleBannervideo.click(closeRoleVideo);

        roleBannervideo.children().eq(0).click(function (e) {
            e.stopPropagation();
        })

        $(document).on("click", ".rolevideo-close", function () {
            roleBannervideo.removeClass("active");
            console.log(123);
        })
    })
})